
<template>
  <div class="products cont1200 clear">
    <div class="left f-l" v-if="productsData != ''">
      <div class="top clear mb">
        <div class="l-t-f f-l clear">
          <div class="largerVersion">
            <!-- <img :src="target" alt /> -->
            <pic-zoom :url="target" :scale="3"></pic-zoom>
          </div>
          <div class="flex insets">
            <img
              v-for="item in productsData.imageShow"
              :key="item.id"
              :src="item"
              @click="target = item"
              class="insetsIMG"
              alt
            />
          </div>
        </div>
        <div class="l-t-r f-l">
          <!-- <h1>{{ $route.params.proid}}</h1> -->
          <span class="title">{{productsData.name}}</span>

          <span class="title2">{{productsData.specialService}}</span>
          <div class="hr"></div>
          <div class="price">
            价 格：
            <span class="pricestyle">¥{{ price }}</span>
          </div>
          <div class="TypeSelection">
            <div class="bklx arrow_box">
              <div class="textBox clear" v-for="item in productsData.havaCategory" :key="item.id">
                <span class="f-l">{{ item.category }}</span>
                <ul class="f-l itembox">
                  <li
                    v-for="(item1,index) in item.list"
                    :key="item1.id"
                    @click="FLGJS(index,item1.id,item1.price,item1.target,item1.attribute)"
                  >
                    <!-- 图片 -->
                    <marquee
                      v-if="!item1.type"
                      :msg="item1.attribute"
                      padding="5px 5px"
                      :bjFlg="index == flg"
                    >
                      <span>{{ item1.attribute }}</span>
                    </marquee>
                    <marquee v-else :msg="item1.attribute" padding="1px 0px" :bjFlg="index == flg">
                      <img :src="item1.target" alt style="width:40px;height:40px;" />
                    </marquee>
                  </li>
                </ul>
              </div>
            </div>

            <div class="textBox clear bknum arrow_box" :style="{}">
              <span class="f-l">数量</span>
              <div class="itembox">
                <el-input-number size="mini" :min="1" v-model="num"></el-input-number>
                <span>件</span>
                <span>库存{{productsData.inventory}}件</span>
              </div>
            </div>

            <div class="textBox clear">
              <div class="itembox">
                <el-popover
                  placement="top"
                  width="200"
                  trigger="click"
                  :disabled="disabled"
                  content="至少选择一种类型"
                >
                  <el-button type="danger" slot="reference" @click="BuyNow">立即购买</el-button>
                </el-popover>

                <el-popover
                  placement="top"
                  width="200"
                  trigger="click"
                  :disabled="disabled"
                  content="至少选择一种类型"
                >
                  <el-button type="danger" slot="reference" @click="addShoppingCart">加入购物车</el-button>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom f-l">
        <div class="detailedData mb">
          <h5>规格参数</h5>
          <ul class="specification clear">
            <li v-for="(item,index) in productsData.attr" :key="item.id">{{index}} : {{item}}</li>
          </ul>
        </div>
        <div class="richText">
          <img v-for="item in productsData.imageIntroduce" :key="item.id" :src="item" alt />
        </div>
        <div class="richText"></div>
      </div>
    </div>
    <div v-else>商品可能已下架</div>
  </div>
</template>

<script type="text/ecmascript-6">
import marquee from "@/components/marquee/marquee";
import router from "../../router";
import PicZoom from "vue-piczoom"; //https://www.jb51.net/article/133409.htm

export default {
  data() {
    return {
      flg: null,
      productsData: "",
      num4: 0,
      showImg: "",
      attr: "",
      price: 0,
      typeId: "",
      num: 0,
      target: "", //大图指向链接
      typename: "",
      disabled: false
    };
  },

  created: function() {
    this.$api.commonAPI.getProducts(this.$route.params.proid).then(response => {
      //获取商品详细
      this.productsData = response.data;
      this.price = response.data.price;
      this.target = response.data.imageShow[0];
    });
  },
  methods: {
    FLGJS(a, id, price, target, typename) {
      //控制勾选 获取商品类型id 获取价格
      this.flg = a;
      this.price = price;
      this.typeId = id;
      this.target = target;
      this.typename = typename;
      // console.log(id, price, target, typename, this.randomCoding());
    },
    replaceImg(url) {
      this.showImg = url;
    },
    addShoppingCart() {
      //添加到购物车
      if (!this.ISnull(this.typeId)) {
        this.disabled = false;
        console.log(this.disabled);
        return true;
      } else {
        this.disabled = true;
      }
      var data = {};
      data.id = this.productsData.id;
      data.num = this.num;
      data.name = this.productsData.name;
      data.typeId = this.typeId;
      data.typename = this.typename;
      data.price = this.price;
      data.imageShow = this.productsData.imageShow[0];
      this.$api.orderAPI
        .addPro({ num: data.num, type: data.typeId })
        .then(res => {});
      console.log(data, this.$store.state.commonDATA.ShoppingCart.List);
    },
    BuyNow() {
      //下单
      if (!this.ISnull(this.typeId)) {
        this.disabled = false;
        console.log(this.disabled);
        return true;
      } else {
        this.disabled = true;
      }
      var objdata = [
        {
          id: this.productsData.id, // 商品id
          imageShow: this.target, //图片链接
          name: this.productsData.name, //名称
          typeId: this.typeId, //选购类型id
          typename: this.typename,
          num: this.num,
          price: this.price
        }
      ];
      // console.log('传递',objdata);
      var ranF = this.randomCoding(5);
      sessionStorage.setItem(ranF, JSON.stringify(objdata));
      this.$router.push({
        name: "order",
        query: { plan: ranF }
      });
    },
    AddToCart() {}
  },

  components: { marquee, PicZoom }
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";

.arrow_box {
  animation: glow 80ms ease-out infinite alternate;
}

.products {
  .left {
    width: 100%;
    .top {
      margin-top: 20px;
      .insetsIMG {
        width: 80px;
        margin-top: 10px;
      }
      .l-t-f {
        border: 1px #f1f1f1 solid;
        width: 350px;
        img {
          cursor: pointer;
        }
        .largerVersion {
          img {
            width: 100%;
          }
        }
      }
      .l-t-r {
        width: 640px;
        padding-left: 10px;
        .title {
          display: block;
          width: auto;
          min-height: 30px;
          line-height: 30px;
          color: #474747;
          font-size: 16px;
          overflow: hidden;
          font-weight: 700;
          padding-bottom: 5px;
        }
        .title2 {
          font-size: 14px;
          color: #ff0036;
        }
        .hr {
          height: 3px;
          background-color: #fcfcfc;
          margin-bottom: 5px;
        }
        .price {
          padding: 25px;
          background-color: #fcfcfc;
          margin-bottom: 10px;
          .pricestyle {
            color: red;
            font-size: 25px;
          }
        }
        .TypeSelection {
          .bknum,
          .bklx {
            border: 2px #ffffff solid;
          }
          .textBox {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;

            color: black;
            font-size: 13px;
            .itembox {
              margin-left: 50px;
            }
            li {
              margin-bottom: 5px;
              max-width: 450px;
              white-space: pre-wrap;
            }

            button {
              height: 50px;
              width: 200px;
            }
          }
        }
      }
    }
    .bottom {
      margin-top: 20px;
      width: 100%;
      .tabsCard {
        width: 100%;
        background-color: rgb(255, 255, 255);
        $tch: 40px;
        height: $tch;
        overflow: hidden;

        li {
          float: left;
          width: 100px;
          text-align: center;
          height: $tch;
          line-height: $tch;
          border: 1px rgb(207, 207, 207) solid;
          cursor: pointer;
        }
        li:hover {
          border: 0;
          border-top: 4px $main-color12 solid;
        }
      }
      .richText {
        border-radius: 5px;
        box-shadow: 0 0 6px 0px #fcfcfc;
        img {
          width: 100%;
        }
      }

      .specification {
        li {
          float: left;
          width: 250px;
          margin: 10px 10px 0 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          color: $alink;
          font-size: 12px;
        }
      }
      .detailedData {
        background-color: white;
        margin: 10px 0px;
      }
    }
  }
  .right {
    width: 210px;
  }
}
</style>


